<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>OPPO官网</title>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="static/css/Quttons.css">
		<link rel="stylesheet" type="text/css" href="static/css/index.css" /></link>
		<link rel="stylesheet" href="static/css/style.css">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">

	</head>
	<style>
		#nonelist li{
			text-align: center;
		}
		#nonelist{
			position: absolute; 
			width: 100px;
			height: 80px;
			top: 0px;
			right: 40px; 
			z-index: 4;
			display: block;
			border-radius: 10px;
			background-color: white;
		}
		
		#nonelist li a{
			font-size: 8px;
			text-decoration: none;
			color: #45494C;
		}
		#nonelist li a:hover{
			color: green;
		}
		.bann a:hover{
			color: green;
		}
		.buttonCollection a:hover{
			color: green;
		}
		.buttonCollection li img{
			margin-left:7px;
		}
		
	</style>
	<body>
		<div id="index">
			<div id="log">
				<img src="static/img/oppo.png"></img>
			</div>
			<div class="bann">
				<ul style="margin-top:10px;">
					<li class="yin">
						<a class="zi" id="zx" href="##">手机</a>
					</li>
					<li>
						<a class="zi" href="##">品牌</a>
					</li>
					<li>
						<a class="zi" href="##">商场</a>
					</li>
					<li>
						<a class="zi" href="##">体验店</a>
					</li>
					<li>
						<a class="zi" href="##">服务</a>
					</li>
					<li>
						<a class="zi" href="##">社区</a>
					</li>
					<li>
						<a class="zi" href="##">ColorOs</a>
					</li>
					<li>
						<a class="zi" href="##">云服务</a>
					</li>
				</ul>
			</div>
			<div class="buttonCollection">
				<div class="qutton" id="qutton_upload" style="margin-top:10px;">
					<div class="qutton_dialog" id="uploadDialog" style="margin-top:10px;">
						<ul>
							<li>
								<img src="static/img/购物车.png"><a href="CartItem.jsp" class="zi"></img>购物车</a>
							</li>
							<li>
								<img style="margin-left:0px;" src="static/img/订单.png"><a href="##" class="zi">我的订单</a>
							</li>
							<li>
								<img style="margin-left:5.5px;" src="static/img/回收单.png"><a href="##" class="zi">回收单</a>
							</li>
							<li>
								<img style="margin-left:5.5px;" src="static/img/个人中心.png"><a href="login.html" class="zi">个人中心</a>
							</li>
							<li>
								<img style="margin-left:8.5px;" src="static/img/登陆.png"><a href="login.html" class="zi">登陆</a>
							</li>
						</ul>
					</div>
				</div>
			</div>

		</div>
		<div id="xian">
			<div class="x1"><img src="static/img/R17.png"></div>
			<div class="x2">
				<img src="static/img/R17pro.png">
				<img src="static/img/findx.jpg">
				<img src="static/img/R15.png">
				<img src="static/img/A7X.png">
			</div>
			<div class="x3">
				<img src="static/img/A1.png">
				<img src="static/img/A3.png">
				<img src="static/img/A5.png">
				<img src="static/img/R11S.png">
			</div>
		</div>
		<div class="slider-container">
			<div class="slider-control left inactive"></div>
			<div class="slider-control right"></div>
			<ul class="slider-pagi"></ul>
			<div class="slider">
				<div class="slide slide-0 active">
					<div class="slide__bg"></div>
					<div class="slide__content">
						<svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">
							<path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
						</svg>
						<div class="slide__text">
							<h2 class="slide__text-heading">OPPOR R17</h2>
							<p class="slide__text-desc">源自水与光的灵感，令 R17 的每一处都弥漫着流动之美。全新凝光渐变工艺，让色彩随着光影交织变幻。当你点亮它的屏幕，灵动的水滴形曲线展现在眼前，散发生动鲜活的魅力。</p>
							<a style = "text-decoration : none;color:white" class="slide__text-link" href = "oppo_goodsInfomation1.jsp">立即购买</a>
						</div>
					</div>
				</div>
				<div class="slide slide-1 ">
					<div class="slide__bg"></div>
					<div class="slide__content">
						<svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">
							<path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
						</svg>
						<div class="slide__text">
							<h2 class="slide__text-heading">OPPO FIND X</h2>
							<p class="slide__text-desc">Find X 的动人之处，在于“隐”。当前后摄像头、听筒等熟悉的元件因科技革新而“消失”的那一刻，生动的艺术之美便凸显出来。亮屏的瞬间，屏幕内容几乎充满了整个视野，这就是 Find X 曲面全景屏。</p>
							<a style = "text-decoration : none;color:white" class="slide__text-link" href = "FindX_infomation_1.jsp">立即购买</a>
						</div>
					</div>
				</div>
				<div class="slide slide-2">
					<div class="slide__bg"></div>
					<div class="slide__content">
						<svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">
							<path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
						</svg>
						<div class="slide__text">
							<h2 class="slide__text-heading">OPPO A5</h2>
							<p class="slide__text-desc">绚丽夺目的幻镜纹理，灵感来自于万华镜梦幻的光影流转。OPPO A5 采用纳米级微晶工艺，
							细腻又灵动。我们精密计算每一条切线的角度，使机身呈现出跟随光变化的空间纹路。
							就像万华镜一样，每一次注视，都美得不一样。</p>
							<a class="slide__text-link">立即购买</a>
						</div>
					</div>
				</div>
				<div class="slide slide-3">
					<div class="slide__bg"></div>
					<div class="slide__content">
						<svg class="slide__overlay" viewBox="0 0 720 405" preserveAspectRatio="xMaxYMax slice">
							<path class="slide__overlay-path" d="M0,0 150,0 500,405 0,405" />
						</svg>
						<div class="slide__text">
							<h2 class="slide__text-heading">OPPO A1</h2>
							<p class="slide__text-desc">传承自 R 系列的轻薄设计，我们在 OPPO A1 上同样采用“小蛮腰”的设计语言，
							使得手机背部的曲线更加灵动，两侧过渡更加顺滑，即便拥有 5.7 英寸的大屏幕，
							手感却仍然十分舒适。</p>
							<a class="slide__text-link">立即购买</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	
		<div id="xia">
			<div id="xia1">
				<a href="#"><img src="static/img/xia1.png"></a>
			</div>
			<div id="xia2">
				<a href="#"><img src="static/img/下2.png"></a>
			</div>
			<div id="xia3">
				<a href="#"><img src="static/img/下3.png"></a>
			</div>
			<div id="xia4">
				<a href="#"><img src="static/img/下4.png"></a>
			</div>

		</div>
		<div id="lian">
			<ul>
				<li id="t1">推荐机型
					<ul>
						<li>R17</li>
						<li>FIND X</li>
						<li>A7</li>
						<li>A7X</li>
						<li>A9</li>
						<li>A11</li>
					</ul>
				</li>
				<li id="t2">服务
					<ul>
						<li>以旧换新</li>
						<li>服务网点查询</li>
						<li>零配件查询</li>
						<li>官方授权网点</li>
						<li>预置软件公告</li>
					</ul>
				</li>
				<li id="t3">关于我们
					<ul>
						<li>关于OPPO</li>
						<li>新闻资讯</li>
						<li>媒体联络</li>
						<li>加入我们</li>
						<li>反馈安全问题</li>
					</ul>
				</li>
				<li id="t4">商务合作
					<ul>
						<li>开放平台</li>
						<li>材料合作</li>
					</ul>
				</li>
				<li id="t5" style="top:210%"><div id="an3"><a href="#">在线客服</a></div>
					<ul>
						<li id="zi">4001-666-888</li>
						<li>24 小时全国热线</li>
					</ul>
				</li>
			</ul>
		</div>
		<div id="di">
			© 2005 - 2018 OPPO 版权所有 粤ICP备08130115号-1 联系方式：4001-666-888
		</div>
	<script src='http://www.5iweb.com.cn/statics/js/jquery.1.7.1.min.js'></script>
		<script src="static/js/lib/velocity.js"></script>
		<script src="static/js/lib/velocity.ui.js" type="text/javascript"></script>
		<script src="static/js/lib/Quttons.js" type="text/javascript"></script>
		<script type="text/javascript" src="static/js/main.js"></script>
		<script type="text/javascript">
		$(document).ready(function() {
			var user_id=<%=request.getSession().getAttribute("user_id")%>;
			//alert("错误用户:" + user_id)
			if(user_id != "" && user_id != null){
				$.ajax({
					url:"FindImgControl",
	                type:"post",
	                data:{"user_id":user_id},
	                dataType : "json",
	                success:function(data){
	                	var strHtml = "";
	    				$.each(data, function(index, eachVal) {
	    					strHtml+="<img src='";
	    					strHtml+=eachVal.user_img;
	    					strHtml+="' style='height: 40px; width: 40px; border-radius: 20px; margin-top:10px'/>";
	    					strHtml+="<p style='position: absolute; margin-right: 100px; margin-top: 60px; font-size: 10px; z-index: 5;'>";
	    					strHtml+=eachVal.user_name;
	    					strHtml+="</p>";
	    					strHtml+="<div id='nonelist'>";
		    					strHtml+="<ul style='list-style: none;'>";
			    					strHtml+="<li><a href='UserSe.jsp'>个人中心</a></li>";
			    					strHtml+="<li><a href='CartItem.jsp'>我的购物车</a></li>";
			    					strHtml+="<li><a href='Order.jsp'>我的订单</a></li>";
			    					strHtml+="<li><a href='ExitControl'>注销</a></li>";
		    					strHtml+="</ul>"
	    					strHtml+="</div>";
	    				});
	    				$(".buttonCollection").html(strHtml);
	                }
				})
			}
		})
		
		</script>
	</body>

</html>